<template>
<div class="play">
  <div class="content">
    <p>{{this.$route.params.name}}</p>
    <p>{{this.$route.params.artist}}</p>
    <img :src="this.$route.params.image" alt="">
    <LyricList :id="this.$route.params.id" :currentTime="currentTime"></LyricList>
    <div class="audio">
     <audio :src="srcObj.url" controls ref="player"></audio>
   </div>
  </div>
</div>
</template>

<script>
import LyricList from '@/components/LyricList'
export default {
  data () {
    return {
      srcObj: {},
      songObj: {},
      currentTime: 0
    }
  },
  beforeDestroy () {
    this.removeEventHandle()
  },
  methods: {
    getData () {
      this.axios({
        params: {
          id: this.$route.params.id
        },
        url: 'song/url'
      }).then(res => {
        this.srcObj = res.data.data[0]
      })
    },
    addEventHandle () {
      this.$refs.player.addEventListener('timeupdate', this.currentTimeHandle)
    },
    removeEventHandle () {
      this.$refs.player.removeEventListener('timeupdate', this.currentTimeHandle)
    },
    currentTimeHandle () {
      this.currentTime = this.$refs.player.currentTime
    }
  },
  created () {
    this.getData()
  },
  computed: {
    getUrl () {
      return decodeURIComponent(this.$route.params.image)
    }
  },
  components: {
    LyricList
  },
  mounted () {
    this.addEventHandle()
  }
}
</script>

<style lang="less" scoped>
.play{
  .content{
    margin: 0 20px;
    background-color: #fff;
    padding: 60px 0px;
    text-align: center;
    .audio{
      margin-top: 20px;
    }
    img{
      width: 400px;
    }
    p{
      margin-bottom: 10px;
    }
  }
}
</style>
